<template>
    <el-aside width="295px" style="height: 100%; background: #ffffff;">
        <div style="border-right: 1px solid #dddddd;
                border-left: 1px solid #dddddd;
                height: 100%; width: 295px;
                padding: 8px 10px;
                overflow-y: scroll;">
            <div class="theme-title">主题筛选</div>

            <div class="theme-body">
                <el-row :gutter="10">
                    <el-col :span="8" v-for="item in items">
                        <div class="theme-body-item" :class="{active: item.active}" :style=" { background : item.color} " @click="setItem(item.id)">
                            <div class="icon-bg" v-if="item.active"></div>
                            <i class="icon icon-checkbox-ed" v-if="item.active"></i>
                        </div>
                    </el-col>
              </el-row>
            </div>
        </div>
    </el-aside>
</template>

<script>
import edit_theme from "../../assets/config/edit_theme";

export default {
  name: "EditorThemeSide",
  data(){
      return {
          items : []
      }
  },
  methods:{
      getItems(){
          let items = edit_theme.menu;
          let menus = [];

          items.forEach( item => {
              let it = item;

              it['active'] = false;

              menus.push(it);
          });

          this.items = menus;
          this.setItem();
      },
      setItem(id){
          let meuns = this.items;
          let list  = [];

          meuns.forEach( (item, index) => {
              let it = item;
              it['active'] = false;

              if(!id){
                  if(index == 0) it['active'] = true;
              }else{
                  if(item.id == id) it['active'] = true;
              }

              list.push(it);
          });

          this.menus = list;
      }
  },
  mounted() {
      this.getItems();
  }
}
</script>

<style lang="scss">
    .theme-title{
        font-size: 14px;
        padding: 8px 0;
        font-weight: bolder;
    }
    .theme-body{
        padding: 8px 0 0;

        .el-row{
            .el-col{
                margin-bottom: 10px;

                .theme-body-item{
                    position: relative;
                    height: 76px;
                    background: #f5f6fa;
                    border: 3px solid #f5f6fa;
                    border-radius: 2px !important;

                    &.active{
                        border: 3px solid #2672FF;
                    }

                    .icon{
                        color: #409EFF;
                        position: absolute;
                        bottom :  - 5px;
                        right: -3px;
                    }
                    .icon-bg{
                        width: 0;
                        height: 0;
                        border-bottom: 18px solid #ffffff;
                        border-left: 18px solid transparent;
                        position: absolute;
                        bottom :  - 5px;
                        right: -3px;
                    }
                }
            }
        }
    }
</style>